<script>
import { onBeforeMount, reactive } from "vue";
import { getRankingJsonData, getRankingData } from "../assets/api/ranking.js";
import { useRouter } from "vue-router";
export default {
  setup() {
    let router = useRouter();

    let ranking = reactive({
      soarItem: [], //飙升榜
      recommendItem: [], //推荐榜
      clickItem: [], //点击榜
      redItem: [], //红包榜
      rewardItem: [], //打赏榜
    });

    // 初始化数据
    let dateInit = async () => {
      let data = await getRankingData().catch(() =>
        console.log("接口调用失败")
      );
      if (!data) data = await getRankingJsonData();
      console.log(data);
      ranking.soarItem = data.allList.filter((item) => item.type == 1);
      ranking.recommendItem = data.allList.filter((item) => item.type == 2);
      ranking.clickItem = data.allList.filter((item) => item.type == 3);
      ranking.redItem = data.allList.filter((item) => item.type == 4);
      ranking.rewardItem = data.allList.filter((item) => item.type == 5);
    };

    // 挂载前
    onBeforeMount(() => {
      dateInit();
    });

    // 过滤器
    let filter = (num) => {
      num = Math.ceil(num / 10000);

      return num > 0 ? num + "万" : num;
    };

    // 跳到详情页
    let details = (id) => {
      router.push({ path: "/Details", query: { id: id } });
    };

    // 返回上一页
    let back = () => {
      router.go(-1);
    };

    return {
      ranking, //接口数据
      filter, //过滤器
      details,
      back,
    };
  },
};
</script>

<template>
  <div class="Ranking">
    <van-sticky>
      <div class="top">
        <span class="iconfont icon-xiangzuo1" @click="back"></span>
        <p>排行</p>
        <span class="iconfont icon-xiangzuo1" style="opacity: 0"></span>
      </div>
    </van-sticky>

    <van-tabs>
      <van-tab title="飙升榜">
        <div class="tabs">
          <div
            class="item"
            v-for="(item, index) in ranking.soarItem"
            :key="item.BookId"
            @click="details(item.BookId)"
          >
            <div class="img">
              <img :src="item.BookImage" alt="" />
            </div>
            <div class="text">
              <p class="title">{{ item.BookName }}</p>
              <p class="content">
                {{ item.Description }}
              </p>
              <div class="author">
                <p>{{ item.Author }}</p>
                <span>{{ filter(item.sentiment) }}人在读</span>
              </div>
            </div>
            <div class="num" v-if="index < 3">{{ index + 1 }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="推荐榜">
        <div class="tabs">
          <div
            class="item"
            v-for="(item, index) in ranking.recommendItem"
            @click="details(item.BookId)"
            :key="item.BookId"
          >
            <div class="img">
              <img :src="item.BookImage" alt="" />
            </div>
            <div class="text">
              <p class="title">{{ item.BookName }}</p>
              <p class="content">
                {{ item.Description }}
              </p>
              <div class="author">
                <p>{{ item.Author }}</p>
                <span>{{ filter(item.sentiment) }}人在读</span>
              </div>
            </div>
            <div class="num" v-if="index < 3">{{ index + 1 }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="点击榜">
        <div class="tabs">
          <div
            class="item"
            v-for="(item, index) in ranking.clickItem"
            @click="details(item.BookId)"
            :key="item.BookId"
          >
            <div class="img">
              <img :src="item.BookImage" alt="" />
            </div>
            <div class="text">
              <p class="title">{{ item.BookName }}</p>
              <p class="content">
                {{ item.Description }}
              </p>
              <div class="author">
                <p>{{ item.Author }}</p>
                <span>{{ filter(item.sentiment) }}人在读</span>
              </div>
            </div>
            <div class="num" v-if="index < 3">{{ index + 1 }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="红包榜">
        <div class="tabs">
          <div
            class="item"
            v-for="(item, index) in ranking.redItem"
            @click="details(item.BookId)"
            :key="item.BookId"
          >
            <div class="img">
              <img :src="item.BookImage" alt="" />
            </div>
            <div class="text">
              <p class="title">{{ item.BookName }}</p>
              <p class="content">
                {{ item.Description }}
              </p>
              <div class="author">
                <p>{{ item.Author }}</p>
                <span>{{ filter(item.sentiment) }}人在读</span>
              </div>
            </div>
            <div class="num" v-if="index < 3">{{ index + 1 }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="打赏榜">
        <div class="tabs">
          <div
            class="item"
            v-for="(item, index) in ranking.rewardItem"
            @click="details(item.BookId)"
            :key="item.BookId"
          >
            <div class="img">
              <img :src="item.BookImage" alt="" />
            </div>
            <div class="text">
              <p class="title">{{ item.BookName }}</p>
              <p class="content">
                {{ item.Description }}
              </p>
              <div class="author">
                <p>{{ item.Author }}</p>
                <span>{{ filter(item.sentiment) }}人在读</span>
              </div>
            </div>
            <div class="num" v-if="index < 3">{{ index + 1 }}</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<style lang="scss" scoped>
.Ranking {
  min-height: 100%;
  min-width: 375px;
  max-width: 750px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 15px;
  .top {
    display: flex;
    width: 100%;
    padding: 0 16px;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
    .icon-xiangzuo1 {
      font-size: 22px;
      color: #b1b1b1;
    }
    p {
      color: #3d3d3d;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .tabs {
    padding: 0 16px;
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    .item {
      margin-top: 10px;
      display: flex;
      padding-bottom: 15px;
      border-bottom: 1px solid #fafafa;
      position: relative;
      .img {
        width: 78px;
        height: 112px;
        flex-shrink: 0;
      }
      .text {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        width: 100%;
        .title {
          font-size: 13px;
          color: #3d3d3d;
          line-height: 24px;
          font-weight: bold;
        }
        .content {
          color: #828282;
          font-size: 12px;
          line-height: 20px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .author {
          display: flex;
          width: 100%;
          justify-content: space-between;
          margin-top: 26px;
          p {
            font-size: 12px;
            color: #616161;
          }
          span {
            color: #f5636a;
            font-size: 12px;
          }
        }
      }
      .num {
        position: absolute;
        right: 0px;
        top: 4px;
        width: 14px;
        height: 20px;
        color: #fff;
        background-color: #ee5f65;
        font-size: 10px;
        text-align: center;
        &::after {
          position: absolute;
          display: block;
          content: "";
          width: 0;
          height: 0;
          border-bottom: 7px solid #fff;
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
          top: 14px;
          right: 0px;
        }
      }
    }
  }
}
::v-deep .van-tab .van-tab__text {
  color: #a9a9a9;
  font-size: 13px;
}
::v-deep .van-tab--active .van-tab__text {
  font-size: 15px;
  color: #ea353d;
}
::v-deep .van-tabs__line {
  width: 19px;
  margin-left: -1px;
  bottom: 22px;
}
</style>